﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单列表 - QAdmin后台模板</title>
    <link rel="stylesheet" href="~/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="~/static/admin/css/style.css">
    <script src="~/static/common/layui/layui.js"></script>
    <script src="~/static/common/jquery-3.3.1.min.js"></script>
    <script src="~/static/common/vue.min.js"></script>
</head>
<body>
    <div id="app">
        
        <div class="main" id="app">
            
            <!--右侧-->
            <div class="">
                <div class="layui-row">
                    <div class="layui-col-lg8">
                        <a href="/Menu/Add" class="layui-btn">添加菜单</a>
                    </div>

                    <div class="layui-col-lg4" style="text-align: right">
                        <div class="layui-input-inline" style="width: 300px">
                            <input type="text" name="k" id="MenuName" onclick="TableReload()" value="" placeholder="用户名" class="layui-input key">
                        </div>
                        <button type="button" class="layui-btn sou">搜索</button>
                    </div>
                </div>

                <table class="layui-hide" id="sample_table" lay-filter="demo"></table>


            </div>
        </div>
    </div>
    <script src="~/static/admin/js/script.js"></script>
    <script>
        //表格数据加载
    layui.use(['table', 'util'], function () {
    //用table就要定义
    var table = layui.table;
    //用form就要定义
    var form = layui.form;

    //表格数据加载
    table.render({
        elem: '#sample_table' //表格id要对应
        , url: '/Menu/GetMenuList' //对应控制器的action方法
        , height:500
        , page: true //开启分页
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
            { field: 'MenuId',width: 120, title: '编号', sort: true }
            , { field: 'ParentId',width: 120, title: '父级菜单ID', sort: true }
            , { field: 'MenuName', title: '菜单名称' }
            , { field: 'Url', title: '菜单地址' }
            , { field: 'Status', title: '是否显示', width: 120, templet: '#switchTpl', unresize: true } //切换按钮禁用启用
            , { field: 'CreateTime', title: '创建时间', width: 200, templet: '<div>{{ Format(d.CreateTime,"yyyy-MM-dd hh:mm:ss")}}</div>' }
            , { title: '操作',fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo' }
        ]]
    });

    //监听启用和禁用操作
    form.on('switch(switchShow)', function (obj) {
        var tip = "启用";
        var id = this.id;
        //获取当前选中的值
        var status = this.value;
        if (this.value === "true") {
            tip = "停用";
            status = 0;
        }
        else {
            tip = "启用";
            status = 1;
        }
        //启用的功能代码
        layer.confirm('真的要' + tip+'吗', function (index) {
            $.ajax({
                url: "/Menu/UpdateStatus?id=" + id + "&status=" + status,
                type: "Post",
                success: function (data) {
                    if (data.success) {
                        layer.msg(tip+'成功！', {
                            title: '提示框',
                            icon: 1,
                            time: 2000
                        }, function () {
                            TableReload();
                            layer.close(index);
                        });
                    }
                    else {
                        layer.msg(tip +'失败！', {
                            title: '提示框',
                            icon: 1,
                            time: 2000
                        });
                    }
                }
            });
        });
        //点击搜索事件
        $(".sou").click(function () {
            TableReload();
        })
    });

    //监听工具条
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        var id = data.MenuId;
        if (obj.event === 'del') {
            //删除的功能代码
            layer.confirm('真的要删除吗', function (index) {
                $.ajax({
                    url: "/Menu/DelMenu?id=" + id,
                    type: "Post",
                    success: function (data) {
                        if (data.success) {
                            layer.msg(data.msg, {
                                title: '提示框',
                                icon: 1,
                                time: 1000
                            }, function () {
                                TableReload();
                                layer.close(index);
                                });
                            obj.del();
                        }
                        else {
                            layer.msg(data.msg, {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    }
                });
            });
        } else if (obj.event === 'edit') {
            //修改菜单
            window.location.href = "/Menu/Update?id=" + id;
        }
    });

});
            //转换时间
    function Format(datetime, fmt) {
        var newtime = datetime.replace(/\/Date\((\d+)\)\//gi, "$1");
        if (parseInt(newtime) == newtime) {
            if (newtime.length == 10) {
                newtime = parseInt(newtime) * 1000;
            } else if (newtime.length == 13) {
                newtime = parseInt(newtime);
            }
        }
        newtime = new Date(newtime);
        var o = {
            "M+": newtime.getMonth() + 1,                 //月份
            "d+": newtime.getDate(),                    //日
            "h+": newtime.getHours(),                   //小时
            "m+": newtime.getMinutes(),                 //分
            "s+": newtime.getSeconds(),                 //秒
            "q+": Math.floor((newtime.getMonth() + 3) / 3), //季度
            "S": newtime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (newtime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

//查询列表刷新
function TableReload() {
    var table = layui.table;
    var menuName = $("#MenuName").val();
    //上述方法等价于
    table.reload('sample_table', {
        where: { //设定异步数据接口的额外参数，任意设
            menuName: menuName
        }
    });
}
    </script>
</body>
</html>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" id="{{d.MenuId}}" name="sex" value="{{d.Status}}" lay-skin="switch" lay-text="是|否" lay-filter="switchShow" {{ d.Status == 1 ? 'checked' : '' }}>
</script>
